import { Tabs } from 'antd'
import UseStateComponent from './useState'
import UseEffectComponent from './useEffect'
import UseMemoComponent from './useMemo'
import UseCallbackComponent from './useCallback'
import UseReducerComponent from './useReducer'
import UseRefComponent from './useRef'
import UseTransitionComponent from './useTransition'
import Closuretrap from './closuretrap' // 闭包陷阱

const HooksPage = () => {
  const items = [
    {
      label: 'useState',
      key: '1',
      children: <UseStateComponent />
    },
    {
      label: 'useEffect',
      key: '2',
      children: <UseEffectComponent />
    },
    {
      label: 'useContext',
      key: '3',
      children: <UseMemoComponent />
    },
    {
      label: 'useCallback',
      key: '4',
      children: <UseCallbackComponent />
    },
    {
      label: 'useReducer',
      key: '5',
      children: <UseReducerComponent />
    },
    {
      label: 'useRef',
      key: '6',
      children: <UseRefComponent />
    },
    {
      label: 'useTransition',
      key: '7',
      children: <UseTransitionComponent />
    },
    {
      label: '闭包陷阱',
      key: '8',
      children: <Closuretrap />
    }
  ]
  return (
    <Tabs size="large" items={items}  type="card" />
  )
}
export default HooksPage
